#shortener.row(style="margin-top: 40px;margin-bottom:75px;")
  %form{:id => 'add-form',:name => "shortener", :action => "/api/v1/add", :method => "post", :class => boxify_class(2, nil, nil, 'form-horizontal')}
    .control-group
      %label.control-label{:for => "shortener[url]"} Url to Shorten:
      .controls
        %input{:type => "text", :name => "shortener[url]", :class => "text"}
        %input{:type => "submit", :value => "Shorten", :class => "btn primary"}
        %a#advanced-toggle{:onClick => 'window.showHideAdvanced();', href: '#'} Show Advanced Options
    .control-group.advanced
      %label{:for => 'shortener[expire]', :class => 'control-label advanced'} Time till Expired:
      .controls
        %input{:type => 'text', :name => 'shortener[expire]', :class => 'text advanced'}
    .control-group.advanced
      %label{:for => 'shortener[max_clicks]', :class => 'control-label advanced'} Max Clicks:
      .controls
        %input{:type => 'text', :name => 'shortener[max_clicks]', :class => 'text advanced'}
    .control-group.advanced
      %label{:for => 'shortener[desired_short]', :class => 'control-label advanced'} Desired Short:
      .controls
        %input{:type => 'text', :name => 'shortener[desired_short]', :class => 'text advanced'}
    .control-group.advanced
      %label{:for => 'shortener[allow_override]', :class => 'control-label'} Allow Random Override:
      .controls
        %input{:type => 'checkbox', :name => 'shortener[allow_override]', :class => 'text advanced', :value => 'true'}
    :javascript
      $(function(){
        $('.advanced').addClass('hide');
        $("#add-form").submit(function(event) {

          /* stop form from submitting normally */
          event.preventDefault();

          // my best take so far at scraping form data
          var formData = {};
          $.each($(this).serializeArray(), function(i, field) {
            formData[field.name] = field.value;
          });

          /* Send the data using post and put the results in a div */
          $.post( this.action , formData, function( data ) {
            $( "#display-add-new-shorts" ).append( data.html );
            }
          );

        });
      })
  #display-add-new-shorts{class: boxify_class(3)}

:css
  .hide { display: none;}
